const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
const glob = require('glob-all')
const PurifyCss = require('purifycss-webpack')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

const extractCss = new ExtractTextWebpackPlugin({
  filename: 'css/[name].bundle.css'
})


module.exports = {
  mode: 'production', // production , development
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    // publicPath: './dist/',
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },
  resolve: {
    alias: {
      // 指定解析文件夹别名，jquery后面的$表示精确匹配
      jquery$: path.resolve(__dirname, 'src/libs/jquery.min.js')
    }
  },
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        use: extractCss.extract({
          fallback: {
            loader: 'style-loader',
            options: {singleton: true}
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                // minimize: true,
                // modules: true, // 启用css-modules
                localIdentName: '[path][name]_[local]--[hash:bases64:5]'
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  // 合并图片，spritecss
                  require('postcss-sprites')({
                    spritePath: 'dist/assets/imgs/sprites',
                    retina: true // 设置苹果等手机设备的2倍图片问题, 对应的图片名称后面要加@2x
                  }),
                  require('postcss-cssnext')()
                ]
              }
            },
            {
              loader: 'less-loader'
            }
          ]
        })
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          // {
          //   loader: 'file-loader',
          //   options: {
          //     publicPath: '../assets/imgs/',
          //     outputPath: './',
          //     useRelativePath: true
          //   },
          //   // options: {
          //   //   publicPath: '..',
          //   //   outputPath: '',
          //   //   useRelativePath: false
          //   // }
          // }
          {
            loader: 'url-loader',
            options: {
              // limit: 100000
              name: '[name]-[hash:5].min.[ext]',
              limit: 10000, // 大于10kb的图片，直接只用file-loader处理
              publicPath: '../assets/imgs/sprites',
              outputPath: './',
              // publicPath: '',
              // outputPath: 'dist/',
              useRelativePath: true
            }
          },
          {
            loader: 'img-loader',
            options: {
              pngquant: {
                quality: "80"
              }
              // plugins: [
              //   {
              //     // bypassOnDebug: true,
              //     // progressive: true,
              //     // optimizationLevel: 3,
              //     pngquant: {
              //       quality: "65-80",
              //       speed: 4
              //     }
                // }
                // require('imagemin-gifsicle')({
                //   interlaced: false
                // }),
                // require('imagemin-mozjpeg')({
                //   progressive: true,
                //   arithmetic: false
                // }),
                // require('imagemin-pngquant')({
                //   floyd: 0.5,
                //   speed: 2
                // }),
                // require('imagemin-svgo')({
                //   plugins: [{
                //       removeTitle: true
                //     },
                //     {
                //       convertPathData: false
                //     }
                //   ]
                // })
              // ]
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // limit: 100000
              name: '[name]-[hash:5].min.[ext]',
              limit: 10000, // 大于10kb的图片，直接只用file-loader处理
              // publicPath: '../assets/imgs/sprites',
              outputPath: './css',
              // useRelativePath: true
            }
          }
        ]
      },
      {
        // 可以替换ProvidePlugin
        test: path.resolve(__dirname, 'src/app.js'),
        use: [
          {
            loader: 'imports-loader',
            options: {
              $: 'jquery'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    extractCss,
    // new ExtractTextWebpackPlugin({
    //   filename: '[name].min.css',
    //   allChunks: false
    // }),
    // 剔除没有用到多余的css样式， css tree shaking
    new PurifyCss({
      // 这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
      paths: glob.sync([
        path.join(__dirname, './*.html'),
        path.join(__dirname, './src/*.js')
      ]),
      // paths: glob.sync(path.join(__dirname, './*.html'))
    }),
    // 使用ProvidePlugin将特定的文件打包，全局可以使用key访问到
    // new webpack.ProvidePlugin({
    //   "$": "jquery",
    //   "d3": "d3"
    // })
    // js tree shaking, 测试UglifyJsPlugin后没有效果， mode production压缩js才有效果
    // new UglifyJsPlugin(), // webpack 4.x后 可以使用 --mode production 进行压缩
    //  webpack.optimize.UglifyJsPlugin has been removed
    // new webpack.optimize.UglifyJsPlugin({
    //   minimize: false
    // })
  ],

  optimization: {
    minimize: true
  }
}